<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全员工信息</title>
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all">
<style>
td .layui-form-select {
            margin-top: -10px;
            margin-left: -15px;
            margin-right: -15px;
        }
.layui-table-cell{
	overflow:visible;
} 
.layui-table-box{ 
	overflow:visible; 
}
</style>
<script src="../public/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<%if(session.getAttribute("user")==null){ %>
    <script>
		window.top.location.replace("../login.jsp");
	</script>
<%}%>
<div>
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
		<legend><h2>全员工信息</h2></legend>
	</fieldset>
	<table class="layui-hide" id="demo" lay-filter="form"></table>
	
	<!-- 头部工具栏 -->
	<script type="text/html" id="search">
 		 
			模糊搜索：
		<div class="layui-inline">
	  	  <select id="condition" name="condition">
        	<option value=""></option>
			<option value="deptname">按部门</option>
        	<option value="rolename">按职位</option>
			<option value="userid">按职工编号</option>
		  </select>
	 	 </div>
  		<div class="layui-inline">
    		<input class="layui-input" id="conditionValue" name="conditionValue" autocomplete="off">
  		</div>
  			<button class="layui-btn" name="search" data-type="reload"  lay-event="search">搜索</button>
			<button class="layui-btn" name="search" data-type="reload"  lay-event="add">添加新员工</button>
	</script>
<!-- 	职工状态 -->
	<script type="text/html" id="statusTpl">
		<input type="checkbox" name="status" value="{{d.userid}}" lay-skin="switch" lay-text="在职|离职" lay-filter="statusDemo" {{d.status == 0?'':'checked'}}>
	</script>
<!-- 	性别 -->
	<script type="text/html" id="sexTpl">
		<input type="radio" name="{{d.userid}}" lay-filter="sexDemo" value="男" title="男" {{d.sex=='男'?'checked':''}}>
	    <input type="radio" name="{{d.userid}}" lay-filter="sexDemo" value="女" title="女" {{d.sex=='女'?'checked':''}}>
	</script>
<!-- 	删除 -->
	<script type="text/html" id="barDemo">
		<button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-event="delete">
    		<i class="layui-icon">&#xe640;</i>
  		</button>
	</script>
	
	<script type="text/javascript">
	layui.use(['table', 'jquery','form'],function(){
		$ = layui.jquery;
		var table = layui.table;
		var form = layui.form;
		
		var tableIns = table.render({
			elem: '#demo'
			    ,url: '../HumanServlet?button=3' //数据接口
			    ,toolbar: '#search'
			    ,page: true //开启分页
			    ,defaultToolbar:["print"]
			    ,cols: [[ //表头
			      {field: 'userid', title: '员工编号', width:120, sort: true,fixed:'left'}
			      ,{field: 'pwd', title: '账户登录密码<span style="color:#5FB878">(可改)</span>', width:180, sort: true,edit:'text'}
			      ,{field: 'name', title: '员工姓名<span style="color:#5FB878">(可改)</span>', width:150,edit:'text'} 
			      ,{field: 'status', title: '员工状态<span style="color:#5FB878">(可改)</span>', width:150, sort: true ,templet:'#statusTpl'}
			      ,{field: 'deptname', title: '所属部门<span style="color:#5FB878">(可改)</span>', width:150,templet:selectDept}
			      ,{field: 'rolename', title: '职位<span style="color:#5FB878">(可改)</span>', width: 150,templet:selectRole}
			      ,{field: 'sex', title: '性别<span style="color:#5FB878">(可改)</span>', width:150, sort: true,templet:'#sexTpl'}
			      ,{field: 'age', title: '年龄<span style="color:#5FB878">(可改)</span>', width:150, sort: true,edit:'text'}
			      ,{field: 'phone', title: '联系电话<span style="color:#5FB878">(可改)</span>', width:200, sort: true,edit:'text'}
			      ,{field: 'createtime', title: '入职时间', width:200, sort: true}
			      ,{fixed: 'right', align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
			    ]]
		});
		
		
		 // 顶部工具栏事件
		  table.on('toolbar(form)', function(obj){
// 			  var checkStatus = table.checkStatus(obj.config.id);
			  var data = obj.data;
			  var layEvent = obj.event;
			  switch(obj.event){
			  	case 'search':
			  		var conditionValue = $('#conditionValue');
			    	var condition = $('#condition');
				    //这里以搜索为例
		    	    if(conditionValue.val().length != 0){
			    		if(condition.val() == "deptname"){
				    		layer.msg("按部门搜索到与<span style='color:#FFB800;'>\""+conditionValue.val()+"\"</span>相关结果如下！");
				    	}else if(condition.val() == "rolename"){
				    		layer.msg("按职位搜索到与<span style='color:#FFB800;'>\""+conditionValue.val()+"\"</span>相关结果如下！");
				    	}else if(condition.val() == "userid"){
				    		layer.msg("按员工编号搜索到与<span style='color:#FFB800;'>\""+conditionValue.val()+"\"</span>相关结果如下！");
				    	}else{
				    		layer.msg("请先选择搜索类型！");
//				    		layer.msg(conditionValue.val().length); //看变量数据的长度，实测有效
				    	}
			    	}else{
			    		layer.msg("正在显示全部！");
			    	}
			    	tableIns.reload({
						url: '../HumanServlet?button=3'
						,where: { //设定异步数据接口的额外参数，任意设
							"condition": condition.val(),
						    "conditionValue": conditionValue.val(),
//		 				    "page":"1",
//		 				    "limit":"10"
						}
			    	});
			    	break;
			  	case 'add':
			  		var addUser = layer.open({
			  			type:2
			  			,title:"添加新员工"
			  			,area: ['800px', '600px']
			  			,maxmin:true
			  			,shadeClose:true
			  			,content:"04addUser.jsp"
			  			,end:function(){
// 			  				 $(".layui-laypage-btn").click();
			  			}
			  		})
			  		break;
				}
		  });
		//动态构建 部门的 下拉列表
			function selectDept(d){
				var selectItem = '<div><select lay-filter="deptrole" name="'+ d.userid +'" id="dept">\n';
				$.ajax({
					url:'../HumanServlet?button=4&getType=dept'
					,type:'post'
					,async:false
					,success:function(res){
						res = eval('('+res+')');
						var data = res.data;
						for(i in data){
							if(d.deptid == data[i].itemId){
								selectItem += '<option value="' + data[i].itemId + '" selected>' + data[i].itemName + '</option>\n';
							}else{
								selectItem += '<option value="' + data[i].itemId + '">' + data[i].itemName + '</option>\n';
							}
						}
						selectItem += '</select></div>';
						console.log(selectItem);
					}
				})
				return selectItem;
			};
			//动态构建 角色的 下拉列表
			function selectRole(d){
				var selectItem = '<div><select lay-filter="deptrole" name="'+ d.userid +'" id="role">\n';
				$.ajax({
					url:'../HumanServlet?button=4&getType=role'
					,type:'post'
					,async:false
					,success:function(res){
						res = eval('('+res+')');
						var data = res.data;
						for(i in data){
							if(d.roleid == data[i].itemId){
								selectItem += '<option value="' + data[i].itemId + '" selected>' + data[i].itemName + '</option>\n';
							}else{
								selectItem += '<option value="' + data[i].itemId + '">' + data[i].itemName + '</option>\n';
							}
						}
						selectItem += '</select></div>';
						console.log(selectItem);
					}
				})
				return selectItem;
			};
			//监听下拉列表
			form.on('select(deptrole)',function(obj){
				console.log(obj);
				var object = obj.elem.name;//修改对象
				var type = obj.elem.id;	//修改的字段项
				var newvalue = obj.value;	//字段新值
				console.log(object+type+newvalue);
				$.ajax({
					url:'../HumanServlet?button=5&type='+type+'&newvalue='+newvalue+'&object='+object
					,type:'post'
					,async:false
					,success:function(res){
//	 					console.log(res);
						layer.msg(res);
					}
				})
			});
			//监听switch职工状态
			form.on('switch(statusDemo)', function(obj){
//	 		    layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
			    var object = this.value;	//对象
			    var type = this.name;		//字段
			    var newvalue = obj.elem.checked==true?1:0;	//新值
			    console.log(object+type+newvalue);
			    $.ajax({
					url:'../HumanServlet?button=5&type='+type+'&newvalue='+newvalue+'&object='+object
					,type:'post'
					,async:false
					,success:function(res){
//	 					console.log(res);
						layer.msg(res);
					}
				})
			});
			//监听单选 性别 按钮事件
			form.on('radio(sexDemo)',function(obj){
				console.log(obj);
				var object = obj.elem.name;	//对象
			    var type = 'sex';			//字段
			    var newvalue = obj.value;	//新值
			    console.log(object+type+newvalue);
			    $.ajax({
					url:'../HumanServlet?button=5&type='+type+'&newvalue='+newvalue+'&object='+object
					,type:'post'
					,async:false
					,success:function(res){
//	 					console.log(res);
						layer.msg(res);
					}
				})
			});
			//单元格编辑事件
			table.on('edit(form)', function(obj){
				var object = obj.data.userid;
				var type = obj.field;
				var newvalue = obj.value;
				console.log(object+type+newvalue);
				$.ajax({
					url:'../HumanServlet?button=5&type='+type+'&newvalue='+newvalue+'&object='+object
					,type:'post'
					,async:false
					,success:function(res){
//	 					console.log(res);
						layer.msg(res);
					}
				})
			});
			table.on('tool(form)',function(obj){
// 				console.log(obj);
				var data = obj.data;
				if(obj.event == 'delete'){
					layer.confirm('真的删除行么', {icon: 5, title:'提示'}, function(index){
			            obj.del(); //删除对应行（tr）的DOM结构
			            layer.close(index);
			            $.ajax({
							url:'../HumanServlet?button=8&userid='+data.userid+"1"
							,type:'post'
							,async:false
							,success:function(res){
//			 					console.log(res);
								layer.msg("与该员工所有相关信息全部删除<span style='color:#FFB800;'>" + res + "</span>");
							}
						});
					});
				}
			})
	});
	</script>
</div>
</body>
</html>